<template>
  <div class="hotelDetail">
    <div v-if="hotelInfo">
      <div class="breadcrumb">
        <a href="javascript:;" @click="goback">{{hotelInfo.big_cate}}</a>
        <i class="el-icon-arrow-right"></i>
        <a href="javascript:;" @click="goback">{{hotelInfo.real_city}}酒店</a>
        <i class="el-icon-arrow-right"></i>
        {{hotelInfo.name}}
      </div>
      <div class="hotelHeader">
        <h3>{{hotelInfo.name}}</h3>
        <p>jin jiang zhi xing (shang hai min hang wu jing dian)</p>
        <div class="address">
          <span class="iconfont icon-location"></span>
          {{hotelInfo.address}}
        </div>
      </div>
      <div class="picInfo">
        <div class="picCover">
          <img :src="showPic" alt />
        </div>
        <div class="picList">
          <img
            @click="changePic(item)"
            v-for="(item,index) in picList"
            :key="index"
            :src="item"
            alt
          />
        </div>
      </div>
      <div class="priceInfo">
        <el-table :data="hotelInfo.products" style="width: 100%">
          <el-table-column prop="name" label="价格来源"></el-table-column>
          <el-table-column prop="bestType" label="低价房型"></el-table-column>
          <el-table-column label="最低价格/每晚">
            <template slot-scope="scope">
              <span class="price">￥{{ scope.row.price }}</span>起
              <i class="el-icon-arrow-right"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <hotelDetailMap :data="{name:hotelInfo.real_city,location:hotelInfo.location}" />
      <div class="hotelInfo">
        <el-row class="list">
          <el-col :span="4" class="aside">基本信息</el-col>
          <el-col :span="20" class="info">
            <el-row>
              <el-col :span="6">入住时间: 14:00之后</el-col>
              <el-col :span="6">离店时间: 12:00之前</el-col>
              <el-col :span="6">{{hotelInfo.creation_time}}/{{hotelInfo.renovat_time}}</el-col>
              <el-col :span="6">酒店规模：{{hotelInfo.roomCount}}间客房</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="list">
          <el-col :span="4" class="aside">主要设施</el-col>
          <el-col :span="20" class="info">
            <span class="assets" v-for="item in hotelInfo.hotelassets" :key="item.id">{{item.name}}</span>
          </el-col>
        </el-row>
        <el-row class="list">
          <el-col :span="4" class="aside">停车服务</el-col>
          <el-col :span="20" class="info">{{hotelInfo.parking ? hotelInfo.parking : '-'}}</el-col>
        </el-row>
        <el-row class="list">
          <el-col :span="4" class="aside">品牌信息</el-col>
          <el-col :span="20" class="info">{{hotelInfo.hotelbrand ? hotelInfo.hotelbrand.name : '-'}}</el-col>
        </el-row>
      </div>
      <div class="userComment">
        <div class="cmtHeader">
          <h4>0条真实用户评论</h4>
          <div class="info">
            <el-row type="flex">
              <el-col :span="4">
                <p>总评数：{{hotelInfo.all_remarks}}</p>
                <p>好评数：{{hotelInfo.good_remarks}}</p>
                <p>差评数：{{hotelInfo.bad_remarks}}</p>
              </el-col>
              <el-col class="commentScore" :span="5">
                <div class="commentStar">
                  <el-rate
                    v-model="hotelInfo.stars"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分"
                  ></el-rate>
                </div>
                <div class="text">推荐</div>
              </el-col>
              <el-col :span="3">
                <div class="rateBox">
                  <el-progress
                    type="circle"
                    :percentage="hotelInfo.scores.environment*10"
                    status="warning"
                    :show-text="false"
                  ></el-progress>
                  <div class="text">
                    <span>环境</span>
                    <span>{{hotelInfo.scores.environment}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="rateBox">
                  <el-progress
                    type="circle"
                    :percentage="hotelInfo.scores.product*10"
                    status="warning"
                    :show-text="false"
                  ></el-progress>
                  <div class="text">
                    <span>产品</span>
                    <span>{{hotelInfo.scores.product}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="rateBox">
                  <el-progress
                    type="circle"
                    :percentage="hotelInfo.scores.service*10"
                    status="warning"
                    :show-text="false"
                  ></el-progress>
                  <div class="text">
                    <span>服务</span>
                    <span>{{hotelInfo.scores.service}}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="cmtBody"></div>
      </div>
    </div>
    <img class="loading" v-else src="@/assets/loading.gif" alt />
  </div>
</template>

<script>
import hotelDetailMap from "@/components/hotel/hotelDetailMap";
export default {
  components: {
    hotelDetailMap,
  },
  data() {
    return {
      hotelInfo: null,
      title: "",
      picList: [
        "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/2.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/3.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/4.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/5.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/6.jpeg",
      ],
      showPic: "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
    };
  },
  //可以进行seo优化，这只做title变化
  head() {
    return {
      title: this.title,
    };
  },
  watch: {
    hotelInfo() {
      this.title = this.hotelInfo.name;
    },
  },
  created() {
    this.getHotelInfo();
  },
  methods: {
    //获取酒店详情
    getHotelInfo() {
      this.$axios({
        url: "hotels?id=" + this.$route.params.id,
      }).then((res) => {
        this.hotelInfo = res.data.data[0];
      });
    },
    //切换图片
    changePic(item) {
      this.showPic = item;
    },
    //回退
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.hotelDetail {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .loading {
    display: block;
    margin: 0 auto;
  }
  .breadcrumb {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
  .hotelHeader {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    h3 {
      font-weight: 400;
      font-size: 24px;
      color: #333;
    }
  }
  .picInfo {
    display: flex;
    margin-bottom: 20px;
    .picCover {
      flex: 2;
      margin-right: 20px;
      img {
        width: 640px;
        height: 360px;
      }
    }
    .picList {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 160px;
        margin-bottom: 10px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .priceInfo {
    margin-bottom: 20px;
    .price {
      color: #ffa500;
      font-size: 16px;
      margin-right: 5px;
    }
  }
  .hotelInfo {
    margin-bottom: 20px;
    .list {
      border-bottom: 1px solid #ddd;
      padding: 20px 0;
      font-size: 14px;
      color: #666;
      .aside {
        color: #333;
        padding: 0 10px;
      }
      .assets {
        background: #eee;
        padding: 5px 10px;
        border-radius: 5px;
        margin: 0 5px;
      }
    }
  }
  .userComment {
    .cmtHeader {
      .info {
        margin: 20px 0;
        color: #666;
        .commentScore {
          position: relative;
          display: flex;
          .commentStar {
            margin-top: 20px;
          }
          .text {
            position: absolute;
            left: 20px;
            width: 70px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            border: 2px solid #f90;
            color: #f90;
            border-radius: 50%;
            box-sizing: content-box;
            font-size: 24px;
            opacity: 0.25;
            transform: rotate(-30deg);
          }
        }
        .rateBox {
          width: 70px;
          position: relative;
          /deep/.el-progress-circle {
            width: 70px !important;
            height: 70px !important;
            path {
              &:first-child {
                stroke: transparent;
              }
              &:last-child {
                stroke-width: 3;
                stroke: #f90;
              }
            }
          }
          .text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            color: #f90;
            flex-direction: column;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>